<!-- 用户端-我的-我的优惠券页面 -->
<template>
	<view>
			<view style="background-color: white;">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view class="content">
				<view v-if="current === 0">
					<view class="background">
						<view class="card">
							<view class="left">
								<view class="signal">
									￥
									<text class="cardvalue" >
										10
									</text >
								</view>
								<view class="condition">
									满200元可用
								</view>
							</view>
							<view class="line"></view>
							<view class="right">
								<view class="right-top">
									通用/仅限于XX加油站使用
								</view>
								<view class="right-bottom">
									<view class="date">
										2020.04.11至2020.05.11
									</view>
									<button>立即使用</button>
								</view>
							</view>
						</view>
						<view class="card">
							<view class="left">
								<view class="signal">
									￥
									<text class="cardvalue" >
										10
									</text >
								</view>
								<view class="condition">
									满200元可用
								</view>
							</view>
							<view class="line"></view>
							<view class="right">
								<view class="right-top">
									通用/仅限于XX加油站使用
								</view>
								<view class="right-bottom">
									<view class="date">
										2020.04.11至2020.05.11
									</view>
									
									<button>立即使用</button>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current === 1">
					<view class="background">
						<view class="card">
							<view class="left_use">
								<view class="signal_use">
									￥
									<text class="cardvalue_use" >
										10
									</text >
								</view>
								<view class="condition_use">
									满200元可用
								</view>
							</view>
							<view class="line"></view>
							<view class="right">
								<view class="right-top">
									通用/仅限于XX加油站使用
								</view>
								<view class="right-bottom">
									<view class="date_use">
										2020.04.11至2020.05.11
									</view>
									<button class="button_use">已领取</button>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current === 2">
					<view class="background">
						<view class="card">
							<view class="left_use">
								<view class="signal_use">
									￥
									<text class="cardvalue_use" >
										10
									</text >
								</view>
								<view class="condition_use">
									满200元可用
								</view>
							</view>
							<view class="line"></view>
							<view class="right">
								<view class="right-top">
									通用/仅限于XX加油站使用
								</view>
								<view class="right-bottom">
									<view class="date_use">
										2020.04.11至2020.05.11
									</view>
									<button class="button_use">已过期</button>
								</view>
							</view>
						</view>
					</view>
					<view class="background">
						<view class="card">
							<view class="left_use">
								<view class="signal_use">
									<text class="cardvalue_use" >
										9
									</text>
										折
								</view>
							</view>
							<view class="line"></view>
							<view class="right">
								<view class="right-top">
									通用/仅限于XX加油站使用
								</view>
								<view class="right-bottom">
									<view class="date_use">
										2020.04.11至2020.05.11
									</view>
									<button class="button_use">已过期</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>




	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				items: ['未使用', '已使用', '已过期'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text'
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			}
		},
		onLoad(e) {
			console.log(e)
		}
	}
</script>


<style lang="scss">
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}


.background{
	/* 居中三剑客 */
	display: flex;
	flex-direction: column;
	}
.card{
	width: 710rpx;
	height: 228rpx;
	margin-left:28rpx ;
	display: flex;
	flex-direction: row;
}
.left{
	width: 230rpx;
	height: 188rpx;
	border: 3rpx solid #A1B0CB;
	border-radius: 20rpx;
	background-color: #1D6FFF;
	margin-top: 20rpx;
	margin-left: 4rpx;
	
	}
.left_use{
	width: 230rpx;
	height: 188rpx;
	border: 3rpx solid #dcdbd3;
	border-radius: 20rpx;
	background-color: #ececec;
	margin-top: 20rpx;
	margin-left: 4rpx;
	}

.cardvalue{
	color: aliceblue;
	font-size:54rpx ;
	/* 居中三剑客 */
	/* 	display: flex;
		align-items: center;
		justify-content: center; */
}
.signal{
	color: aliceblue;
	
	margin-left: 70rpx;
	margin-top: 70rpx;
	font-size: 35rpx;
	font-weight: 500;
}
.condition{
	color: aliceblue;
	margin-top: 8rpx;
	margin-left: 34rpx;
}
.signal_use{
	color: black;
	margin-left: 70rpx;
	margin-top: 70rpx;
	font-size: 35rpx;
	font-weight: 500;
}
.condition_use{
	color: black;
	margin-top: 8rpx;
	margin-left: 34rpx;
}
.cardvalue_use{
	color: black;
	font-size:54rpx ;
	/* 居中三剑客 */
	/* 	display: flex;
		align-items: center;
		justify-content: center; */
}
.line{
	border-left:2rpx dashed  #CECECE;
	height: 148rpx;
	width: 2rpx;
	margin-left: 14rpx;
	margin-top: 40rpx;
}
.right{

}
.right-top{
	margin-left: 34rpx;
	margin-top: 56rpx;
	font-size: 30rpx;
	font-weight: 600;
	color: #5A5A5A;
}
.right-bottom{
	margin-top: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
}
.date{
	margin-right: 15rpx;
	font-size: 24rpx;
	margin-left: 35rpx;
	color: #EC3524;
}
.date_use{
	margin-right: 15rpx;
	font-size: 24rpx;
	margin-left: 35rpx;
	color: #bebebe;
}
button{
	background-color: #1D6FFF;
	color: aliceblue;
	height: 60rpx;
	width: 130rpx;
	font-size: 24rpx;
	font-weight: 550;
	padding-left: 5rpx;
	padding-right: 5rpx;
/* 	margin-top: 140rpx; */
}
.button_use{
	background-color: #BEBEBE;
	color: aliceblue;
	height: 60rpx;
	width: 130rpx;
	font-size: 24rpx;
	font-weight: 550;
}





</style>

